import React, { useState, useEffect } from "react";
import _ from "lodash";
import axios from "axios";
// import $ from 'jquery'
// import jQuery from 'jquery'
import "../../assets/jquery.min.js";
import "../../assets/jquery.liMarquee.js";
import "../../assets/liMarquee.css";
export default function () {
  const [scrollList, setScrollList] = useState([{ name: "123", value: "1" }]);
  // axios.get('/getdevicelist').then(res => {
  //     console.log(`res`, res)
  //     setScrollList(res.data.list)
  //   })
  useEffect(() => {
    console.log(`res1111`, 1213123);
    axios.get("/getdevicelist").then((res) => {
      setScrollList(res.data.list);
      setTimeout(() => {
        $(function () {
          $(".scrollBox").liMarquee({
            direction: "up",
            // scrolldelay: 1000,
            scrollamount: 100,
            circular: true,
            runshort: false,
          });
        });
        console.log(`1123123`, 1123123);
      }, 500);
    });
  }, []);
  // 继承1 构造函数继承 不能继承原型链上的
  function Parent1() {
    this.name = "Parent1";
  }
  Parent1.prototype.intro = function () {
    console.log("自我介绍 - Parent1");
  };
  function Child1() {
    Parent1.apply(this, arguments); // 这一步就是构造函数继承
    this.type = "Child1";
  }
  let c1 = new Child1("c1");
  console.clear();
  console.log(`c1`, c1);
  console.log(`c1`, c1.intro);
  // 继承2 原型链继承 缺点就是 还有实例会指向同一个原型对象，导致数据紊乱
  function Parent2() {
    this.name = "Parent2";
    this.list = [1, 2, 3];
  }
  Parent2.prototype.intro = function () {
    console.log("自我介绍 - Parent2");
  };
  function Child2() {
    // Parent2.apply(this,arguments) // 这一步就是构造函数继承
    this.type = "Child2";
  }
  Child2.prototype = new Parent2();
  let c2 = new Child2();
  let c22 = new Child2();
  console.clear();
  console.log(`c2`, c2);
  console.log(`c2.type`, c2.type);
  console.log(`c2.name`, c2.name);
  console.log(`c2.intro`, c2.intro);
  c22.list.push(4);
  console.log(`c2.list`, c2.list);
  console.log(`c22.list`, c22.list);
  console.log(`c2.__proto__ === c22.__proto__`, c2.__proto__ === c22.__proto__);
  // 继承3 组合继承 构造函数继承 + 原型链继承 缺点就是new了两次
  function Parent3() {
    this.name = "Parent3";
    this.list = [1, 2, 3];
  }
  Parent3.prototype.intro = function () {
    console.log("自我介绍 - Parent3");
  };
  function Child3() {
    Parent3.apply(this, arguments); // 这一步就是构造函数继承
    this.type = "Child3";
  }
  Child3.prototype = new Parent3();
  let c3 = new Child3();
  let c33 = new Child3();
  console.clear();
  console.log(`c3`, c3);
  console.log(`c3.type`, c3.type);
  console.log(`c3.name`, c3.name);
  console.log(`c3.intro`, c3.intro);
  c33.list.push(4);
  console.log(`c3.list`, c3.list);
  console.log(`c33.list`, c33.list);
  console.log(`c3.__proto__ === c33.__proto__`, c3.__proto__ === c33.__proto__);
  // 组合继承 优化1 缺点 就是 instanceof 无法判断实例从哪个构造函数构造的
  function Parent4() {
    this.name = "Parent4";
    this.list = [1, 2, 3];
  }
  Parent4.prototype.intro = function () {
    console.log("自我介绍 - Parent4");
  };
  function Child4() {
    Parent4.apply(this, arguments); // 这一步就是构造函数继承
    this.type = "Child4";
  }
  Child4.prototype = Parent4.prototype;

  let c4 = new Child4();
  let c43 = new Child4();
  console.clear();
  console.log(`c4`, c4);
  console.log(`c4.type`, c4.type);
  console.log(`c4.name`, c4.name);
  console.log(`c4.intro`, c4.intro);
  c43.list.push(4);
  console.log(`c4.list`, c4.list);
  console.log(`c43.list`, c43.list);
  console.log(`c4.__proto__ === c43.__proto__`, c4.__proto__ === c43.__proto__);
  console.log("", c4 instanceof Child4);
  console.log("", c4 instanceof Parent4);
  // 组合继承 优化2 完美写法！！！
  function Parent5() {
    this.name = "Parent5";
    this.list = [1, 2, 3];
  }
  Parent5.prototype.intro = function () {
    console.log("自我介绍 - Parent5");
  };
  function Child5() {
    Parent5.apply(this, arguments); // 这一步就是构造函数继承
    this.type = "Child5";
  }
  Child5.prototype = Object.create(Parent5.prototype);
  Child5.prototype.constructor = Child5;
  let c5 = new Child5();
  let c53 = new Child5();
  let c54 = new Parent5();
  console.clear();
  console.log(`c5`, c5);
  console.log(`c54`, c54);
  console.log(`c5.type`, c5.type);
  console.log(`c5.name`, c5.name);
  console.log(`c5.intro`, c5.intro);
  c53.list.push(4);
  console.log(`c5.list`, c5.list);
  console.log(`c53.list`, c53.list);
  console.log(`c5.__proto__ === c53.__proto__`, c5.__proto__ === c53.__proto__);
  console.log("", c5 instanceof Child5);
  console.log("", c5 instanceof Parent4);
  return (
    <div>
      depart
      {/* <ul className="scrollBox" style={{ height: "200px" }}>
        {scrollList.map((item) => (
          <li>{item.name}</li>
        ))}
      </ul> */}
      <marquee
        ref={marquee}
        behavior="scroll"
        width="250"
        height="200"
        direction="up"
        // loop={-1}
        scrollamount={6}
        scrolldelay={100}
        // behavior="alternate"
        style={{ border: "solid" }}
      >
        <ul style={{ height: "200px" }}>
          {scrollList.map((item) => (
            <li>{item.name}</li>
          ))}
        </ul>
      </marquee>
    </div>
  );
}
